<template>
  <div class="singerhomes">
    <!-- <Header :isBack="isBack" :title="title"></Header> -->
    <div class="header padding-24 space-between" id="head" :class="{bgp:bg}">
      <div class="h-back" @click="goBack">
        <img :src="back" alt />
      </div>
      <div class="title color-f">{{title}}</div>
      <div class="h-share">
        <img :src="share" alt @click="toSharePerson" />
      </div>
      <div class="h-right">
        <img :src="play" alt />
      </div>
    </div>
    <div class="singerinfo padding-24">
      <div class="singer-cove space-between">
        <img :src="userinfo.user_avator" alt class="cove" />
        <div class="right" v-if="isme==1">
          <p class="fs-24 center bg-d" v-if="userinfo.is_singer==1">歌手页</p>
          <div class="space-between" @click="gotouserinfo">
            <img :src="edit" alt />
            <p class="fs-24">编辑</p>
          </div>
        </div>

        <div class="right" v-else>
          <p class="fs-24 center bg-d" v-if="userinfo.is_singer==1">歌手页</p>
          <p class="fs-24 center bg-d">发私信</p>
          <p class="fs-24 center bg-active color-f" @click="tocollect(id)" v-if="iscollect==0">+ 关注</p>
          <p class="fs-24 center bg-d" @click="tocollect(id)" v-if="iscollect==1">取消关注</p>
        </div>
      </div>
      <p class="color-f fs-38 name">{{userinfo.nickname}}</p>
      <div class="color-f fs-26 fans center-col">
        <p>粉丝:{{userinfo.fan_number}}</p>
        <p>|</p>
        <p>关注:{{userinfo.attention_number}}</p>
      </div>
      <p class="fs-26 color-f musicmen" v-if="userinfo.is_singer==1||userinfo.is_vip==1">
        <span v-if="userinfo.is_singer==1">音乐人</span>
        <span v-if="userinfo.is_singer==1&&userinfo.is_vip==1">|</span>
        <span v-if="userinfo.is_vip==1">VIP</span>
      </p>
      <img :src="userinfo.background_photo||bgs" alt class="bg" />
      <div class="bleck"></div>
    </div>
    <div class="tab-nav bg-f space-around">
      <div class="fs-32 center-col" :class="{current:cur==1}" @click="select(1)">
        音乐
        <span class="fs-26">{{total1+total2}}</span>
      </div>
      <div class="fs-32 center-col" :class="{current:cur==2}" @click="select(2)">
        动态
        <span class="fs-26">{{total}}</span>
      </div>
      <div class="fs-32 center-col" :class="{current:cur==3}" @click="select(3)">资料</div>
    </div>
    <div class="music-list bg-f" v-if="cur==1">
      <div class="list-item">
        <div class="list-top space-between padding-24" @click="tagaopen1">
          <p class="fs-32 aright center-col" v-if="open1==false">
            自建歌单
            <span class="fs-24 color-9" style="margin-left:0.1rem">({{total1}})</span>
          </p>
          <p class="fs-32 adown center-col" v-else>
            自建歌单
            <span class="fs-24 color-9" style="margin-left:0.1rem">({{total1}})</span>
          </p>
          <p class="fs-24 color-9"></p>
        </div>
        <div class="list-content" v-if="open1">
          <div class="lists space-between padding-24" v-for="(item,index) in array1" :key="index">
            <img :src="item.song_sheet_photo" alt />
            <div class="right flex-column">
              <p class="fs-32 overFlow">{{item.song_sheet_name}}</p>
              <p class="fs-22 color-9">{{item.music_num}}首</p>
            </div>
          </div>
        </div>
      </div>
      <div class="list-item">
        <div class="list-top space-between padding-24" @click="tagaopen2">
          <p class="fs-32 aright center-col" v-if="open2==false">
            收藏的歌单
            <span class="fs-24 color-9" style="margin-left:0.1rem">({{total2}})</span>
          </p>
          <p class="fs-32 adown center-col" v-else>
            收藏的歌单
            <span class="fs-24 color-9" style="margin-left:0.1rem">({{total2}})</span>
          </p>
          <p class="fs-24 color-9"></p>
        </div>
        <div class="list-content" v-if="open2">
          <div class="lists space-between padding-24" v-for="(item,index) in array2" :key="index">
            <img :src="item.song_sheet_photo" alt />
            <div class="right flex-column">
              <p class="fs-32 overFlow">{{item.song_sheet_name}}</p>
              <p class="fs-22 color-9">{{item.music_num}}首</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dynamic-list" v-if="cur==2">
      <div v-if="dynamiclist[0]">
        <div class="list-item padding-24 bg-f" v-for="(item,index) in dynamiclist" :key="index">
          <div class="head space-between">
            <img :src="item.user_avator" alt />
            <div class="right flex-column">
              <div class="center-col">
                <p class="name fs-26">{{item.nickname}}</p>
                <p
                  class="fs-26 color-6"
                >{{item.dynamic_type==1?'发布动态':(item.dynamic_type==2?'发布视频':'转发')}}</p>
              </div>
              <p class="fs-22 color-9">{{item.created_at}}</p>
            </div>
          </div>
          <div class="content space-between" @click="gotodynamicDetails(item.id)">
            <div class="none"></div>
            <div class="right">
              <p class="text fs-32" v-if="item.dynamic_type!=3">{{item.content}}</p>
              <p class="text fs-32" v-if="item.dynamic_type==3">{{item.viewpoint}}</p>
              <div class="img-list flex wrap" v-if="item.image_url&&item.dynamic_type!=3">
                <img
                  :src="items"
                  alt
                  v-for="(items,indexs) in item.image_url"
                  :key="indexs"
                  @click.stop="lookimg(item.image_url)"
                  :class="{oneimg:item.image_url.length==1}"
                />
              </div>
              <div class="video" v-if="item.video_url&&item.dynamic_type!=3">
                <video
                  :src="item.video_url"
                  autoplay
                  :poster="item.video_cover"
                  controls
                  x5-playsinline="true"
                  playsinline="true"
                  webkit-playsinline="true"
                  v-if="item.id==id"
                ></video>
                <div class="img" v-else @click.stop="playvideo(item)">
                  <img :src="item.video_cover" alt />
                  <div class="play center yuan">
                    <p class="play-btn"></p>
                  </div>
                </div>
              </div>
              <div class="forwarding bg-f5 padding-24" v-if="item.dynamic_type==3">
                <p class="text fs-32">
                  <span>@{{item.original_dynamic_user_name.nickname}}</span>
                  {{item.content}}
                </p>
                <div class="video" v-if="item.video_url">
                  <video
                    :src="item.video_url"
                    autoplay
                    :poster="item.video_cover"
                    controls
                    x5-playsinline="true"
                    playsinline="true"
                    webkit-playsinline="true"
                    v-if="item.id==id"
                  ></video>
                  <div class="img" v-else @click.stop="playvideo(item)">
                    <img :src="item.video_cover" alt />
                    <div class="play center yuan">
                      <p class="play-btn"></p>
                    </div>
                  </div>
                </div>

                <div class="forwardingimg-list flex wrap" v-if="item.image_url">
                  <img
                    :src="items"
                    alt
                    v-for="(items,indexs) in item.image_url"
                    :key="indexs"
                    @click.stop="lookimg(item.image_url)"
                    :class="{oneimg:item.image_url.length==1}"
                  />
                </div>
              </div>
              <div class="share space-between padding-24" v-if="item.music_list_photo">
                <img :src="item.music_list_photo" alt />
                <div class="right flex-column">
                  <p class="fs-32 color-0 overFlow">{{item.music_list_name}}</p>
                  <p class="fs-24 color-6">{{item.singer_name}}</p>
                </div>
              </div>
              <div class="foot space-between">
                <div class="left space-between">
                  <div class="center-col" @click.stop="gotoforwarding(item.id)">
                    <img :src="zhuanfa" alt />
                    <p class="fs-24 color-6">{{item.forward_number}}</p>
                  </div>
                  <div class="center-col">
                    <img :src="dianzan" alt v-if="item.is_click==0" @click.stop="tozan(item.id)" />
                    <img :src="zan" alt v-else @click.stop="tozan(item.id)" />
                    <p class="fs-24 color-6">{{item.click_number}}</p>
                  </div>
                  <div class="center-col">
                    <img :src="comment" alt />
                    <p class="fs-24 color-6">{{item.comment_number}}</p>
                  </div>
                </div>
                <img :src="more" alt class="more" @click.stop="toshare(item)" />
              </div>
            </div>
          </div>
        </div>
        <div class="center" @click="getmore">-- {{text}} --</div>
      </div>
      <div class="center" v-else>暂无动态~</div>
    </div>
    <div class="user-info padding-24 bg-f" v-if="cur==3">
      <div class="info-item" v-if="userinfo.is_singer==1||userinfo.is_vip==1">
        <p class="title fs-32">官方认证</p>
        <div class="center-col" v-if="userinfo.is_singer==1">
          <img :src="musicer" alt />
          <p>音乐人（作词/作曲）</p>
        </div>
        <div class="center-col" v-if="userinfo.is_vip==1">
          <img :src="vip" alt />
          <p>VIP</p>
        </div>
      </div>
      <div class="info-item">
        <p class="title fs-32">个人信息</p>
        <div class="center-col">
          <p class="color-6">性别：</p>
          <p class>{{userinfo.sex}}</p>
        </div>
        <div class="center-col">
          <p class="color-6">年龄：</p>
          <p class>{{userinfo.birthday}}</p>
        </div>
        <div class="center-col">
          <p class="color-6">地区：</p>
          <p class>{{userinfo.region}}</p>
        </div>
      </div>
      <div class="info-item">
        <p class="title fs-32">个人介绍</p>
        <p class="text color-6">{{userinfo.write_name}}</p>
      </div>
    </div>
    <div class="logout lookimg center" @touchmove.prevent v-if="look" @click="look=false">
      <div class="img-box">
        <!-- <img :src="imgshow" alt=""> -->
        <swiper :options="swiperOption" class="swiper" v-if="imgshow.length > 0">
          <swiper-slide v-for="(item,index) in imgshow" :key="index">
            <img :src="item" alt class="imgList" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <div class="logout share-box" @touchmove.prevent v-if="shares">
      <div class="bg-f5">
        <div class="top space-between padding-24">
          <p class="fs-32">分享</p>
          <img :src="del" alt @click="shares=false" />
        </div>
        <div class="space-around padding-24">
          <div class="cell">
            <img :src="wx" alt />
            <p>微信好友</p>
          </div>
          <div class="cell">
            <img :src="pyq" alt />
            <p>微信朋友圈</p>
          </div>
          <div class="cell">
            <img :src="weibo" alt />
            <p>微博</p>
          </div>
        </div>
        <div class="center-col padding-24">
          <div class="cell" @click="todelete" v-if="isme==1">
            <img :src="dele" alt />
            <p>删除</p>
          </div>
          <div class="cell" v-else>
            <img :src="report" alt />
            <p>举报</p>
          </div>
        </div>
      </div>
    </div>
    <shareModel v-show="leaderModal" @fn="getShareModel" :leaderModal="leaderModal"></shareModel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      leaderModal: false, //控制微信内分享模态框
      isBack: true,
      title: "个人主页",
      cur: 1,
      open1: false,
      open2: false,
      look: false,
      shares: false,
      isme: 2,
      bg: false,
      id: "",
      userid: "",
      obj: "",
      page: 1,
      total: 0,
      iscollect: 0,
      text: "点击加载更多",
      musicer: require("../../assets/account/musicer.png"),
      vip: require("../../assets/account/vip.png"),
      share: require("../../assets/account/share.png"),
      edit: require("../../assets/account/edit.png"),
      back: require("../../assets/index/back.png"),
      play: require("../../assets/index/play.png"),
      zhuanfa: require("../../assets/account/zhuanfa.png"),
      zan: require("../../assets/account/zan.png"),
      dianzan: require("../../assets/account/dianzan.png"),
      comment: require("../../assets/account/comment.png"),
      more: require("../../assets/index/more.png"),
      del: require("../../assets/account/del.png"),
      wx: require("../../assets/frend/weixin.png"),
      weibo: require("../../assets/frend/weibo.png"),
      pyq: require("../../assets/frend/pyq.png"),
      dele: require("../../assets/frend/delete.png"),
      report: require("../../assets/frend/report.png"),
      bgs: require("../../assets/account/singerbg.png"),
      imgshow: [],
      dynamiclist: [],
      array1: [],
      array2: [],
      userinfo: "",
      swiperOption: {
        // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        // 循环
        loop: false,
        // 设定初始化时slide的索引
        initialSlide: 0,
        // 滑动速度
        speed: 300,
        // 滑动方向
        loopedSlides: 1,
        direction: "horizontal",
        // 小手掌抓取滑动
        grabCursor: true,
        slidesPerView: "auto",
        pagination: {
          el: ".swiper-pagination"
        },
        on: {
          // 滑动之后回调函数
          slideChangeTransitionStart: function() {
            /* realIndex为滚动到当前的slide索引值 */
            this.imgIndex = this.realIndex - 1;
          }
        }
      },
      total1: 0,
      total2: 0,
      shareObject: {}
    };
  },
  created() {
    this.id = this.$route.query.user_id;
    this.getmyinfo();
    this.getuserinfo();
    //console.log(this.isme)
  },
  mounted() {
    window.addEventListener("scroll", this.onScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    // 判断是否在微信中打开
    is_weixn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // 表示在微信里面
        this.leaderModal = true;
        return true;
      } else {
        return false;
      }
    },
    // 获取分享模态框传过来的status
    getShareModel(e) {
      this.leaderModal = e;
    },
    // 去分享
    toSharePerson() {
      this.shareObject = {
        title: "分享个人主页",
        desc: this.userinfo.nickname,
        img: this.userinfo.user_avator
      };
      this.is_weixn();
      // 记录进入app时的url
      if (typeof window.entryUrl === "undefined" || window.entryUrl === "") {
        window.entryUrl = location.href.split("#")[0];
      }
      if (this.isapp == 0) {
        this.wxshare.getWxmessage(
          this.shareObject.title,
          this.shareObject.desc,
          /(Android)/i.test(navigator.userAgent)
            ? location.href.split("#")[0]
            : window.entryUrl,
          this.shareObject.img,
          location.href
        );
      } else if (this.isapp == 1) {
        var sendData = {
          type: "1",
          data: {
            title: this.shareObject.title,
            description: this.shareObject.desc,
            shareimg: this.shareObject.img,
            share_url: location.href
          }
        };
        window.postMessage(JSON.stringify(sendData));
      }
    },
    //自建歌单列表
    getuserSongSheetList() {
      let url = this.$host1 + `home/userSongSheetList`;
      this.$axios
        .get(url, {
          params: {
            pageSize: 10000,
            page: 1,
            user_id: this.userinfo.user_id
          }
        })
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.array1 = resData.data.list;
              this.total1 = resData.data.num;
            } else {
              this.total1 = 0;
              this.array1 = [];
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    //收藏歌单列表
    getusercollectionSongSheetList() {
      let url = this.$host1 + `home/collectionSongSheetList`;
      this.$axios
        .get(url, {
          params: {
            pageSize: 10000,
            page: 1,
            user_id: this.userinfo.user_id
          }
        })
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.array2 = resData.data.list;
              this.total2 = resData.data.list_num;
            } else {
              this.total2 = 0;
              this.array2 = [];
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    iscollected() {
      var url = this.$host1 + `home/friend/hasAttention`;
      var data = {
        user_love_id: this.id
      };
      this.$axios
        .post(url, data)
        .then(res => {
          // console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            this.iscollect = resData;
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getmyinfo() {
      var url = this.$host1 + `home/getPersonalMsg`;
      this.$axios
        .get(url)
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.userid = resData.data.user_id;
              //console.log(this.userid,this.id)
              if (this.userid == this.id) {
                this.isme = 1;
                // console.log('是自己')
              } else {
                this.isme = 2;
                this.iscollected();
                // console.log('不是自己')
              }
            } else if (resData.code == 0) {
              // this.$router.push('/login');
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getuserinfo() {
      var url = this.$host1 + `home/getUserMsg`;

      this.$axios
        .get(url, {
          params: {
            user_id: this.id
          }
        })
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              this.userinfo = resData.data;
              this.getuserSongSheetList();
              this.getusercollectionSongSheetList();
              this.getdynamiclist();
            } else if (resData.code == 0) {
              // this.$router.push('/login');
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getmore() {
      if (this.page < this.total / 50) {
        this.page++;
        this.AlertWin("加载中，请稍等！");
        this.getdynamiclist();
      } else {
        this.AlertWin("没有更多数据啦！");
      }
    },
    lookimg(i) {
      //console.log(i)
      this.look = true;
      this.imgshow = i;
    },
    getdynamiclist() {
      let url = this.$host1 + `home/friend/loveUserDynamic`;
      this.$axios
        .get(url, {
          params: {
            user_id: this.userinfo.user_id,
            pageSize: 50,
            page: this.page,
            type: 1
          }
        })
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              //this.dynamiclist=resData.data.result
              this.total = resData.data.total_number;
              if (this.page == 1) {
                this.dynamiclist = resData.data.result;
              } else {
                this.dynamiclist = this.dynamiclist.concat(resData.data.result);
              }
              for (var i = 0; i < this.dynamiclist.length; i++) {
                //this.dynamiclist[i].publish_time=this.dynamiclist[i].publish_time
                this.dynamiclist[i].timeago = this.common.timeago(
                  this.dynamiclist[i].publish_time * 1000
                );
              }
              if (this.page < this.total / 50) {
                this.text = "点击加载更多";
              } else {
                this.text = "END";
              }
            } else {
              this.dynamiclist = [];
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.dynamiclist = [];
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    select(i) {
      this.cur = i;
    },
    tagaopen1() {
      this.open1 = !this.open1;
    },
    tagaopen2() {
      this.open2 = !this.open2;
    },
    gotouserinfo() {
      this.$router.push("/userinfo");
    },
    onScroll() {
      //可滚动容器的高度
      let innerHeight = document.querySelector("#head").clientHeight;
      //屏幕尺寸高度
      let outerHeight = document.documentElement.clientHeight;
      //可滚动容器超出当前窗口显示范围的高度
      let scrollTop =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
      //console.log(innerHeight + " " + outerHeight + " " + scrollTop);
      if (scrollTop <= 160) {
        //加载更多操作
        //console.log("loadmore");
        this.bg = false;
      } else {
        this.bg = true;
        //this.common.AlertWin('没有更多数据啦！')
      }
    },
    playvideo(i) {
      this.id = i.id;
      //this.getdynamiclist()
      //console.log(i)
    },
    gotodynamicDetails(id) {
      this.$router.push({
        path: "/dynamicDetails",
        query: {
          id: id
        }
      });
    },
    toshare(i) {
      //console.log(i)
      this.obj = i;

      this.shares = true;
    },
    todelete() {
      let url = this.$host1 + `home/dynamic/deleteDynamic`;
      var data = {
        dynamic_id: this.obj.id
      };
      this.$axios
        .post(url, data)
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              //this.dynamiclist=resData.data.result
              this.AlertWin("删除成功");
              this.page = 1;
              this.getdynamiclist();
              this.shares = false;
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    tozan(id) {
      let url = this.$host1 + `home/dynamic/ClickRecord`;
      var data = {
        dynamic_id: id
      };
      this.$axios
        .post(url, data)
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              //this.dynamiclist=resData.data.result
              //this.AlertWin("发表成功！");
              this.page = 1;
              this.getdynamiclist();
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    gotoforwarding(id) {
      this.$router.push({
        path: "/forwarding",
        query: {
          id: id
        }
      });
    },
    tocollect(id) {
      let url = this.$host1 + `home/friend/eachAttention`;
      var data = {
        user_love_id: id
      };
      this.$axios
        .post(url, data)
        .then(res => {
          //console.log(res)
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              if (this.iscollect == 1) {
                this.AlertWin("取消关注成功！");
              } else {
                this.AlertWin("关注成功！");
              }
              this.iscollected();
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    }
  }
};
</script>
<style lang="scss" >
.singerhomes {
  //min-height: 100%;
  height: auto;
  width: 100%;

  .header {
    width: 100%;
    height: 1rem;
    background: none;
    .h-back {
      width: 0.15rem;
      height: 0.26rem;
      img {
        width: 100%;
      }
    }
    .title {
      font-size: 0.36rem;
      font-weight: bold;
    }
    .h-right {
      width: 0.38rem;
      height: 0.5rem;
      img {
        display: inline-block;
        width: 100%;
      }
    }
    .h-share {
      position: absolute;
      right: 1rem;
      width: 0.45rem;
      height: 0.43rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .bgp {
    background: linear-gradient(to right, #680dae, #9529c6);
  }
  .singerinfo {
    overflow: hidden;
    position: relative;
    padding-top: 0.001rem;
    //margin-top: 1rem;
    height: 4.3rem;
    .bg {
      width: 100%;
      height: 100%;
      z-index: -1;
      left: 0;
      top: 0;
      position: absolute;
      object-fit: cover;
      //opacity: 0.6;
      //filter: blur(0.5rem);
    }
    .bleck {
      width: 150%;
      height: 150%;
      z-index: -1;
      left: 0;
      top: 0;
      position: absolute;
      //object-fit: cover;
      background-color: rgba(0, 0, 0, 0.2);
    }
    .singer-cove {
      z-index: 1;
      margin-top: 1.2rem;
      .cove {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        object-fit: cover;
      }

      .right {
        display: flex;
        justify-content: flex-end;
        //justify-content: space-arouen;
        align-items: center;
        width: calc(100% - 2.5rem);
        height: 0.6rem;
        //background-color: greenyellow;
        p {
          margin-left: 0.1rem;
          width: 1.4rem;
          height: 100%;
          border-radius: 0.3rem;
          //background-color: #d6dee1;
        }
        .space-between {
          margin-left: 0.2rem;
          padding: 0 0.3rem;
          box-sizing: border-box;
          width: 1.4rem;
          height: 0.6rem;
          border-radius: 0.3rem;
          background-color: #d6dee1;
          img {
            width: 0.23rem;
            height: 0.23rem;
          }
          p {
            width: auto;
            margin-left: 0;
            line-height: 0.6rem;
            //height: 0.6rem;
          }
        }
      }
    }
    .name {
      margin-top: 0.2rem;
    }
    .fans {
      margin-top: 0.1rem;
      p {
        margin-right: 0.2rem;
      }
    }
  }
  .tab-nav {
    height: 1rem;
    border-bottom: 0.01rem solid #e9e9e9;
    div {
      //background-color: greenyellow;
      height: 100%;
      position: relative;
      span {
        margin-left: 0.1rem;
      }
    }
    .current {
      color: #7408b4;
      font-size: 0.36rem;
    }
    .current::after {
      content: "";
      width: 0.6rem;
      height: 0.05rem;
      position: absolute;
      bottom: 0;
      left: 50%;
      border-radius: 0.2rem;
      margin-left: -0.3rem;
      background-color: #7408b4;
    }
  }
  .music-list {
    .list-item {
      .list-top {
        position: relative;
        height: 1.2rem;
        border-bottom: 0.01rem solid #e9e9e9;
        .aright::before {
          content: "";
          width: 0.18rem;
          height: 0.18rem;
          margin-right: 0.2rem;
          //position: absolute;
          border-right: 0.01rem solid #999;
          border-bottom: 0.01rem solid #999;
          border-top: none;
          border-left: none;
          transform: rotate(-45deg);
        }
        .adown::before {
          content: "";
          width: 0.18rem;
          height: 0.18rem;
          margin-right: 0.2rem;
          //position: absolute;
          margin-top: -0.08rem;
          border-right: 0.01rem solid #999;
          border-bottom: 0.01rem solid #999;
          border-top: none;
          border-left: none;
          transform: rotate(45deg);
        }
      }
      .list-content {
        .lists {
          height: 1.5rem;
          border-bottom: 0.01rem solid #e9e9e9;
          img {
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 0.12rem;
            object-fit: cover;
          }
          .right {
            width: calc(100% - 1.4rem);
            height: 1rem;
          }
        }
      }
    }
  }
  .dynamic-list {
    //margin-top: 1rem;
    margin-bottom: 0.2rem;
    .list-item {
      height: 100%;
      border-bottom: 0.01rem solid #e9e9e9;
      .head {
        height: 1rem;
        img {
          width: 0.75rem;
          height: 0.75rem;
          border-radius: 50%;
          object-fit: cover;
        }
        .right {
          width: calc(100% - 1rem);
          height: 0.75rem;
          .name {
            color: #3875d1;
            margin-right: 0.2rem;
          }
        }
      }
      .content {
        margin-top: 0.1rem;
        height: auto;
        padding-bottom: 0.2rem;
        .none {
          width: 0.75rem;
          height: auto;
        }
        .right {
          width: calc(100% - 1rem);
          height: auto;
          .text {
            line-height: 0.4rem;
          }
          .img-list {
            width: 100%;
            height: auto;
            img {
              width: 1.9rem;
              height: 1.9rem;
              object-fit: cover;
              border-radius: 0.1rem;
              margin: 0.1rem 0.05rem 0;
            }
            .oneimg {
              width: auto;
              max-width: 100%;
              height: auto;
              max-height: 5rem;
              object-fit: cover;
              border-radius: 0.1rem;
            }
          }
          .video {
            margin-top: 0.1rem;
            width: 100%;
            height: 3.4rem;
            border-radius: 0.05rem;
            .img {
              width: 100%;
              height: 100%;
              position: relative;
              border-radius: 0.05rem;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 0.05rem;
              }
              .play {
                width: 1rem;
                height: 1rem;
                border: 0.01rem solid rgba(255, 255, 255, 0.8);
                background-color: rgba(0, 0, 0, 0.5);
                position: absolute;
                top: 50%;
                margin-top: -0.5rem;
                left: 50%;
                margin-left: -0.5rem;
                //border-radius: 0.05rem;
                .play-btn {
                  width: 0;
                  height: 0;
                  margin-left: 0.4rem;
                  width: 0px;
                  height: 0px;
                  border-left: 0.3rem solid transparent;
                  border-top: 0.2rem solid transparent;
                  border-right: 0.3rem solid #fff;
                  border-bottom: 0.2rem solid transparent;
                  opacity: 0.7;
                  transform: rotate(180deg);
                }
              }
            }

            video {
              width: 100%;
              height: 100%;
              background-color: #444;
              border-radius: 0.05rem;
            }
          }
          .share {
            width: 100%;
            height: 1.2rem;
            background-color: #f5f5f5;
            margin-top: 0.1rem;
            border-radius: 0.05rem;
            img {
              width: 0.87rem;
              height: 0.87rem;
              object-fit: cover;
              border-radius: 0.06rem;
            }
            .right {
              width: calc(100% - 1rem);
              height: 0.8rem;
            }
          }
          .forwarding {
            padding-top: 0.001rem;
            margin-top: 0.1rem;
            width: 100%;
            height: auto;
            border-radius: 0.1rem;
            padding-bottom: 0.2rem;
            .text {
              margin-top: 0.2rem;
              span {
                color: #3875d1;
                margin-right: 0.3rem;
              }
            }
            video {
              width: 100%;
              height: 3.25rem;
              margin-top: 0.1rem;
              border-radius: 0.05rem;
            }
            .forwardingimg-list {
              width: 100%;
              height: auto;
              img {
                width: 1.74rem;
                height: 1.74rem;
                object-fit: cover;
                border-radius: 0.1rem;
                margin: 0.1rem 0.05rem 0;
              }
              .oneimg {
                width: auto;
                max-width: 100%;
                height: auto;
                max-height: 4rem;
                object-fit: cover;
                border-radius: 0.1rem;
              }
            }
          }
          .foot {
            width: 100%;
            height: 1rem;
            .left {
              width: 5rem;
              height: 100%;
              //background-color: greenyellow;
              img {
                width: 0.3rem;
                height: 0.3rem;
                margin-right: 0.2rem;
              }
            }
            .more {
              width: 0.08rem;
              height: 0.3rem;
            }
          }
        }
      }
    }
    .center {
      height: 1rem;
    }
  }
  .user-info {
    height: auto;
    .info-item {
      padding-bottom: 0.3rem;
      .title {
        font-weight: 800;
        line-height: 1rem;
      }
      .center-col {
        height: 0.5rem;
        img {
          width: 0.32rem;
          height: 0.32rem;
          margin-right: 0.2rem;
        }
      }
    }
  }
  .lookimg {
    background-color: rgba(0, 0, 0, 1);
    .img-box {
      width: 100%;
      height: 100%;
      //background-color: #fff;
      .swiper {
        width: 100%;
        height: 100%;
        //background-color: red;
        // max-height: 80%!important;
        .swiper-wrapper {
          // width: 100%;
          // height: 100%!important;
          display: flex;
          align-items: center;
          //background-color: blue;
          .swiper-slide {
            //margin-right: 0.2rem;
            width: 100% !important;
            height: 100% !important;
            //position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            //background-color: green;
            img {
              width: 100%;
              height: auto;
              max-height: 100%;
              object-fit: cover;
            }
          }
        }
        .swiper-pagination {
          width: auto;
          //height: 0.2rem;
          //background-color: #fff;
          //z-index: 9;
          display: flex;
          align-items: center;
          position: absolute;
          bottom: 1rem;
          left: 50%;
          //top: 50%;
          transform: translate(-50%, 0);
          margin: 0 auto;
          .swiper-pagination-bullet {
            width: 0.2rem;
            height: 0.2rem;
            text-align: center;
            line-height: 0.2rem;
            font-size: 0.24rem;
            background-color: #fff;
          }
          .swiper-pagination-bullet-active {
            background-color: #fff;
          }
        }
      }
    }
  }
  .share-box {
    .bg-f5 {
      width: 100%;
      height: 6rem;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 0.2rem 0.2rem 0 0;
      .top {
        height: 1rem;
        //background-color: greenyellow;
        img {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
      .space-around {
        height: 2.3rem;
        border-bottom: 0.01rem solid #e9e9e9;
        //background-color: greenyellow;
        .cell {
          text-align: center;
          img {
            width: 1.15rem;
            height: 1.15rem;
            border-radius: 50%;
          }
          p {
            margin-top: 0.2rem;
          }
        }
      }
      .center-col {
        height: 2.3rem;
        //border-bottom: 0.01rem solid #e9e9e9;
        //background-color: greenyellow;
        .cell {
          margin-left: 0.4rem;
          text-align: center;
          margin-right: 1rem;
          img {
            width: 1.15rem;
            height: 1.15rem;
            border-radius: 50%;
          }
          p {
            margin-top: 0.2rem;
          }
        }
      }
    }
  }
}
</style>
